<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box {
        width: 100px;
        height: 2000px;
        background: red;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box"></div> -->
    <input class="myinput" type="text" />
    <script>
      // 一、浏览器事件
      // 1.等待dom和资源加载完毕的时候执行
      // window.onload = function(){
      //     console.log("加载");
      // }
      // 2.onresize ： 浏览器大小改变的时候触发
      // window.onresize = function(){
      //     console.log("123");
      // }

      // 3.onscroll:页面滚动的时候触发;
      // window.onscroll = function(){
      //     // console.log("滚了");
      //     console.log(document.documentElement.scrollTop);
      // }

      // 二、表单事件
      // 1.表单内容改变的时候触发 change 且需要失去焦点；
      // var myInputEle = document.querySelector(".myinput");
      // myInputEle.onchange = function(){
      //     console.log(this.value);
      // }
      // 2.表单输入的时候触发事件 input
      // var myInputEle = document.querySelector(".myinput");
      // myInputEle.oninput = function(){
      //     console.log(this.value);
      // }
      // 3.聚焦的时候触发事件focus
      // var myInputEle = document.querySelector(".myinput");
      // myInputEle.onfocus = function(){
      //     console.log("聚焦了");
      // }
      // 4.失去焦点的时候触发事件 blur
      // var myInputEle = document.querySelector(".myinput");
      // myInputEle.onblur = function(){
      //     console.log("失去焦点");
      // }
    </script>
  </body>
</html>
